<template>
  <div>
    <h1>父组件</h1>
    <!-- 代表data中的值，也能在页面直接渲染 -->
    <h2>{{ testData }}</h2>
    <Son :info="info" :obj="obj" :msg="msg" :testData="testData" @fun="fun"></Son>
  </div>
</template>

<script lang="ts">
//defineComponent 是一个函数，作用就是定义一个组件，在内部传入对象，配置对象
import { defineComponent, ref, reactive, provide } from 'vue';
//引入组件
import Son from './components/Son.vue'

export default defineComponent({
  name: 'App',
  setup() {
    //使用ref、reactive记得引入
    let info = ref('今天天气好晴朗！')
    let obj = reactive({
      name: 'tom',
      age: 20
    })
    function foo() {
      console.log(info);
      //此处的info和template模板中的info不一样 
      //这里的info是ref对象，template模板中的info是具体值，相当于这里的info.value
    }
    const msg = ref('小朋友，好好学习，多多劳动!!!')

    //设置事件 fun  ，用来测试$emit传值
    function fun(value: string) {//这里涉及到一个问题，这整个环境是在ts下，是要声明数据类型的，其他地方的没有报错，但是这里的函数形参报错了，所以要数据类型声明
      console.log('vue3中的emit传值' + '---' + value)
    }
    //父级传子级 provide inject
    // provide 是一个vue3封装的函数  跟vue2是有区别的
    //第一个参数是key值（相当于标识--可自定义） 第二个参数是传入的值(数据)
    provide('info', info)
    provide('num', ref(0))
    provide('obj', obj)
    return {
      info,
      obj,
      foo,
      msg,
      fun
    }
  },
  data() {
    return {
      testData: '看看data中的值能否props传值'
    }
  },

  components: {
    Son
  }
});
</script>

<style>

</style>
